<template>
  <div>
    <el-dialog
        title="选择设备"
        :close-on-click-modal="false"
        custom-class="add-drive-dialog us-none"
        v-model="AddDriveVisible"
        width="45%"
        :before-close="handleCloseAddDriveDialog"
    >
      <el-card class="box-card" v-for="(group,index) in Devices" :key="index" style="margin-bottom: 10px">
        <template #header>
          <div class="box-card-header">
            <n-icon :component="components[HardwareChipIcon]" size="40" :depth="1"/>
            {{ group.title }}
          </div>
        </template>
        <div class="add-drive-list">
          <div v-for="(item, itemIndex) in group.list" :key="itemIndex" class="add-drive-item">
            <h2 @click="SelectDevice(item)">
              <n-icon :component="components['HardwareChipIcon']" size="40" :depth="1"/>
              {{ item.DeviceName }}
            </h2>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script setup>
import { AppParams } from '@/utils/appParams'
import { ref, watch } from "vue";
import { icon } from '@/plugins'

const components = {
  HardwareChipIcon: icon.ionicons5.HardwareChipIcon,
  SqlIcon: icon.carbon.SqlIcon,
}
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const Emits = defineEmits(['close', 'SelectDevice'])
const HardwareChipIcon = icon.ionicons5.HardwareChipIcon
watch(() => props.show, (v) => {
  if (v) {
    AddDriveVisible.value = v
  }
})
const Devices = ref(AppParams.DEVICE_HUB)
const AddDriveVisible = ref(false.DEVICE_HUB)

/**
 * 添加设备事件
 * @param drive
 */
const SelectDevice = (drive) => {
  Emits('SelectDevice', drive)
  handleCloseAddDriveDialog()
}
/**
 * 关闭窗口
 */
const handleCloseAddDriveDialog = () => {
  AddDriveVisible.value = false
  Emits('close')
}
</script>

<style lang="scss">
.add-drive-dialog {
  .box-card {
  }

  .box-card-header {
    display: flex;
    align-items: center;

    > div {
      font-weight: bold;
      display: flex;
      align-items: center;
      align-content: center;

      .PLC {
        padding-right: 10px;
      }
    }
  }

  .add-drive-list {
    display: flex;
    flex-wrap: wrap;

    .add-drive-item {
      cursor: pointer;

      h2 {
        display: flex;
        align-items: center;
      }

      .PLC-S7-1200 {
        padding-right: 10px;
      }
    }

  }
}
</style>
